<template>
    <app-wrap loading class="recent-visitors-wrap">
        <div class="recent-visitors" v-if="visitors.length">
            <ac-recent-visitor v-for="(item, index) in visitors" :info="item" :key="index"></ac-recent-visitor>
        </div>
        <div class="no-data" v-else>
            <img src="../static/images/no-visitor.png" mode="widthFix" alt="">
            <text>还没有人访问过你的名片哦</text>
            <text>请努力将名片分享出去吧</text>
        </div>
    </app-wrap>
</template>

<config>
    {
    "navigationBarTitleText": "最近访客",
    }
</config>

<script>
  import appWrap from '@/components/app-wrap'
  import acRecentVisitor from '@/components/ac-recent-visitor'
  import {getLog} from "@/api";
  import {mapGetters} from "vuex";

  export default {
    name: "recent-visitors",
    components: {
      appWrap, acRecentVisitor
    },
    data() {
      return {
        visitors: []
      }
    },
    computed: {
      ...mapGetters(['cardInfo'])
    },
    methods: {
      getVisitors() {
        getLog({
          type: 1,
          refId: this.cardInfo.id,
        }).then(data => {
          this.visitors = data.data || [];
        });
      }
    },
    mounted(){
      this.$appWrap.hideLoading();
    },
    created() {
      // 查询浏览记录
      this.getVisitors();
    }
  }
</script>

<style lang="less">
    page {
        background-color: #F8F8F9;
        height: 100%;
    }

    .recent-visitors {
        margin-top: 32px;
        background-color: #fff;
        padding-left: 36px;
        border-bottom: 1px solid rgba(226, 226, 226, 1);

        .recent-visitor-item {
            background: none;
            margin-bottom: 0;
            border-radius: 0;
            border-bottom: 1px solid rgba(226, 226, 226, 1);

            &:last-child {
                border: 0;
            }

            .avatar {
                img {
                    width: 106px;
                    height: 106px;
                }
            }
        }
    }

    .no-data {
        margin-top: 154px;
        text-align: center;

        img {
            width: 474px;
            display: block;
            margin: auto;
            margin-bottom: 62px;
        }

        text {
            font-size: 36px;
            line-height:54px;
            display: block;
            /*margin-top: 62px;*/
        }
    }
</style>
